<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full  flex flex-col">
            <el-page-header @back="action_go_back" :content="$route.query.name">
            </el-page-header>
            <el-divider class=" mb-w10"></el-divider>
        </div>
        <div class="w-full flex flex-row" style="height:750px">
            <div class=" h-full border rounded-sm flex flex-col" style="width:49%">
                <div class="w-full flex flex-row justify-between p-w10">
                    <div class="flex flex-row   w-w2/5">
                        <el-input placeholder="请输入问题名称" clearable prefix-icon="el-icon-search"
                            v-model="s_question.key_question" @clear="action_list_question">
                        </el-input>
                        <el-button type="primary" class=" bg-cmain_hover ml-w10" @click="action_list_question">搜索
                        </el-button>
                    </div>
                    <el-button type="primary" class=" bg-cmain_hover ml-w10" icon="el-icon-plus"
                        @click="dialog_add_question = true">添加问题</el-button>
                </div>
                <div class=" w-full h-w680 px-w20  overflow-y-auto flex flex-col" id="questionList">
                    <div class=" py-w10  border-b flex flex-row items-center justify-between cursor-pointer px-w10"
                        :class="s_question.select_item_id == item.id ? ' bg-caux text-white' : ''"
                        v-for="(item, index) in s_question.list_question" :key="index"
                        @click="action_question_item_click(item)">
                        {{ (index + 1) + "、" + item.info }}
                        <el-button :class="s_question.select_item_id == item.id ? ' text-white' : ''"
                            icon="el-icon-edit" circle size="small" @click="action_edit_question(item)">
                        </el-button>
                    </div>
                </div>
            </div>
            <div style="width:2%"></div>
            <div class=" h-full border rounded-sm flex flex-col" style="width:49%">
                <div class="w-full flex flex-row justify-end p-w10">
                    <el-button v-if="s_question.select_item_id" type="primary" class=" bg-cmain_hover ml-w10"
                        icon="el-icon-plus" @click="dialog_add_answer = true">添加答案</el-button>
                </div>
                <div class=" w-full h-w680 px-w20  overflow-y-auto flex flex-col" id="questionList">
                    <div class=" py-w10  border-b flex flex-row items-center justify-between cursor-pointer px-w10"
                        v-for="(item, index) in s_question.list_answer" :key="index"
                        @click="action_question_item_click(item)">
                        {{ (option == 1 ? (index + 1) + '、' : s_question.list_anser_type[index] + '、') +
                                item.info + "（分值：" + item.score + "）"
                        }}
                        <el-button icon="el-icon-edit" circle size="small" @click="action_edit_answer(item)">
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <UiDialogAddQuestion :data="s_question.m_question" :is_showDialog="dialog_add_question"
            @nydialog_closed="dialog_add_question = false" @nydialog_submit="action_add_question">
        </UiDialogAddQuestion>
        <UiDialogAddAnswer :data="s_question.m_answer" :is_showDialog="dialog_add_answer"
            @nydialog_closed="dialog_add_answer = false" @nydialog_submit="action_add_answer">
        </UiDialogAddAnswer>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
